<template>
  <NuxtLayout />
  <van-config-provider theme="dark"></van-config-provider>
  <template v-if="showFakeIcon">
    <WImage
      v-if="!showFakeIconLoading"
      alt="customer service"
      @click="showCustomerService"
      class="fixed cursor-pointer right-3 bottom-3 lg:right-7 lg:bottom-7 h-14 w-14"
      :src="useAsset('customer_service.webp')" />
    <div
      class="fixed cursor-progress rounded-full flex justify-center items-center bg-[#1972f5] lg:right-7 lg:bottom-7 right-3 bottom-3 h-14 w-14"
      v-else>
      <van-loading color="white" size="30" />
    </div>
  </template>
</template>
<script lang="ts" setup>
import { initCrisp, useAsset } from '~/utils'
import WImage from '~/components/logic/WImage.vue'

const showFakeIcon = ref(true)
const showFakeIconLoading = ref(false)
onBeforeMount(() => {
  window.triggerCrispInit = () => {
    console.log('移除假客服按钮')
    showFakeIcon.value = false
  }
})
const i18n = useI18n()
useHead({
  htmlAttrs() {
    return {
      dir: i18n.locale.value === 'ar' ? 'rtl' : 'ltr',
    }
  },
})
const showCustomerService = () => {
  showFakeIconLoading.value = true
  initCrisp()
  window.$crisp.push(['do', 'chat:open'])
}
</script>
